<template>
	<div class="node-wrap" ref="node" style="isolation: isolate; ">
		<div class="node-wrap-box" @click="show">

			<!-- start-node -->
			<div class="content" style="display: flex;flex-direction: row;color: rgb(130, 140, 165);">

				<em class="item-index">{{nodeConfig.index}}</em>
				<el-icon class="close" style="z-index:19900501" @click.stop="delNode()"><el-icon-close /></el-icon>
				<div class="flex ai-center" style="padding: 5px;padding-right: 25px;">
					<div class="item-icon flex ai-center jc-center">
						<div class="default-icon flex ai-center jc-center">
							<span role="img" class="anticon tx-ant-icon" style="transform: rotate(0deg);">
								<el-icon><el-icon-menu /></el-icon>
							</span>
						</div>
					</div>
					<div class="flex ai-center jc-center">
						<div>
							请 <span class="high-light">选择插件</span>
							<br>和 <span class="high-light">要执行的操作</span>
						</div>
					</div>
				</div>
				<workflowProps :left="4" :top="15"></workflowProps>
			</div>

		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.name}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.name" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="选择要抄送的人员">
							<el-button type="primary" icon="el-icon-plus" round
								@click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
							<div class="tags-list">
								<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable
									@close="delUser(index)">{{user.name}}</el-tag>
							</div>
						</el-form-item>
						<el-form-item label="">
							<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'
	import workflowProps from '../workflowProps'

	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			addNode,
			workflowProps
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {}
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show() {
				this.form = {}
				this.form = JSON.parse(this.safeStringify(this.nodeConfig))
				if (this.form.metadata?.plugin_name) {
					this.drawer = true
				} else {
					this.selectHandle("plugin", () => {

					})
				}
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
			},
			save() {
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			delUser(index) {
				this.form.nodeUserList.splice(index, 1)
			},
			selectHandle(type, data) {
				this.select(type, data)
			},
			toText(nodeConfig) {
				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
					const users = nodeConfig.nodeUserList.map(item => item.name).join("、")
					return users
				} else {
					if (nodeConfig.userSelectFlag) {
						return "发起人自选"
					} else {
						return false
					}

				}
			}
		}
	}
</script>

<style scoped>
	.content {
		min-height: 80px;
	}
</style>
